<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">我是div</div>

    <script>
    /* 
        在DOM中，网页中所有的文本内容都是文本节点对象
            可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做

            可以直接通过元素去修改其中的文本
                修改文本的三个属性
                    element.textContent
                        - 获取的是标签中的内容，不会考虑CSS样式
                        
                    element.innerText
                        - innerText获取内容时，会考虑CSS样式
                        - 通过innerText去读取CSS样式，会触发网页的重排
                        - 当字符串中有标签时，会自动对标签进行转义
                        - <li> --> &lt;li&gt; 

                    element.innerHTML  获取或修改元素中的html代码
                        - 可以直接向元素中添加html代码
                        - innerHTML插入内容时，有被XSS注入的风险
    */
    const box1 = document.getElementById('box1'); 
    </script>
</body>
</html>